<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ include file="/common/common.jsp" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>会员列表</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <!-- Bootstrap 3.3.4 -->
    <link href="${ctx}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- FontAwesome 4.3.0 -->
    <link href="${ctx}/static/plugins/datatables/css/matrix-style.css" rel="stylesheet" type="text/css" />
    <link href="${ctx}/static/dist/css/AdminLTE.css" rel="stylesheet" type="text/css" />
    <link href="${ctx}/static/plugins/datatables/css/dataTables.bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="${ctx}/static/css/basic.css" rel="stylesheet" type="text/css">
    <style type="text/css">
		.right_btn{
			float: right;
		}
		.left_btn{
			float:left;
			padding:10px 0px 10px 20px
		}
		.form-group{
			display: inline-flex;
		}
		.s_table{
			width: 100%;
			padding: 20px 20px 20px 0px;
		}
		.s_table label{font-weight: normal;}
		.s_table tr{
			height: 50px;
			margin: 10px;
		}
		.form-control{
			width: 80%;
		}
		.right_btn{
			float: right;
			margin-right: 5%;
		}
		.label{font-weight: 500;}
		.s_table td{
			font-weight: normal;
			padding-right: 20px;
			max-width: 200px;
			text-align: right;
		}
		.isMarketing_td .isMarketing_td{
			text-align: left;
		}
		.div_hidden{display: none}
    </style>
</head>
<body>
<div class="wrapper">
	<div class="widget-box">
		<div class="widget-title">
		   <h5>请输入查询条件</h5>
		</div>
		<div class="widget-content nopadding">
			<table class="s_table">
				<tr>
					<td colspan="6">
						<div class="left_btn">
				          <button type="button"  class="btn btn-primary" onClick="exportExcel()">导出当前会员</button>
						</div>
					</td>
				</tr>
				<tr>
					<td>
						<label for="member_id">会员ID：</label>
					</td>
					<td>
						<input type="text" class="form-control" id="member_id" placeholder="会员ID">
					</td>
					<td>
						<label for="contacts">联系人：</label>
					</td>
					<td>
						<input type="text" class="form-control" id="contacts" placeholder="联系人">
					</td>
					<td>
						<label for="member_phone">手机号：</label>
					</td>
					<td>
						<input type="text" class="form-control" id="member_phone" placeholder="手机号">
					</td>
				</tr>
				<tr>
					<td>
						<label>注册时间：</label>
					</td>
					<td>
						<input type="text" class="form-control" readonly="readonly" id="start_create_time" data-type="date_00" onClick="WdatePicker({el:'start_create_time',maxDate:'#F{$dp.$D(\'end_create_time\')}'})">
					</td>
					<td>
						<label>至</label>
					</td>
					<td>
						<input type="text" class="form-control" readonly="readonly" id="end_create_time" data-type="date_00" onClick="WdatePicker({el:'end_create_time',minDate:'#F{$dp.$D(\'start_create_time\')}'})">
					</td>
					<td> <label>状态：</label></td>
					<td> 
						<select class="form-control" name="status" id="status">
							 <option value="">全部</option>
		                     <option value="2">正常</option>
		                     <option value="3">冻结</option>
                 		</select>
	                 </td>
				</tr>
				<tr>
					<td><label >推广师：</label></td>
					<td >
						<select class="form-control" name="isMarketing" id="isMarketing">
							 <option value="">全部</option>
		                     <option value="1">是</option>
		                     <option value="2">否</option>
                 		</select>
					</td>
					<td><label>实名认证：</label></td>
					<td >
						<select class="form-control" name="certification" id="certification">
							 <option value="">全部</option>
		                     <option value="1">未认证</option>
		                     <option value="2">已认证</option>
		                     <option value="3">待审核</option>
                 		</select>
					</td>
					<td><label>等级：</label></td>
					<td >
						<select class="form-control" name="level" id="level">
							 <option value="">全部</option>
		                     <option value="1">普通会员</option>
		                     <option value="2">VIP</option>
                 		</select>
					</td>
				</tr>
				<tr>
					<td colspan="6">
						<div class="right_btn">
								<button type="button" id="btn_query" class="btn btn-primary" onClick="query()">查询</button>
						</div>
					</td>
				</tr>
			</table>
		</div>
	</div>
	
	 <div class="row">
		 <div class="col-xs-12">
		 	<div class="box">
		 		 <div class="box-header">
	                 <h3 class="box-title">会员列表</h3>
	             </div>
	             <!-- 列表 -->
	             <div class="box-body table-responsive">
	             	<table id="dataTables" class="table table-bordered table-hover">
	             	</table>
	             </div>
		 	</div>
		 </div>
	</div
</div>
<div class="div_hidden">
	<form action="${ctx}/api/member/memberExportExcel"  id="memberExport" method="post">
		<input type="hidden" name="id" value="" id="e_memberId"/>
		<input type="hidden" name="pageNum" value="" id="e_pageNum"/>
		<input type="hidden" name="pageSize" value="" id="e_pageSize"/>
		<input type="hidden" name="referencePhone" value="" id="e_referencePhone"/>
		<input type="hidden" name="memberName" value="" id="e_memberName"/>
		<input type="hidden" name="sex" value="" id="e_sex"/>
		<input type="hidden" name="isMarketing" value="" id="e_isMarketing"/>
		<input type="hidden" name="certification" value="" id="e_certification"/>
		<input type="hidden" name="status" value="" id="e_status"/>
		<input type="hidden" name="createStartTime" value="" id="e_createStartTime"/>
		<input type="hidden" name="createEndTime" value="" id="e_createEndTime"/>
		<input type="hidden" name="memberPhone" value="" id="e_memberPhone"/>
		<input type="hidden" name="level" value="" id="e_level"/>
	</form>	
</div>
<div class="modal fade" id="imageModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">图片</h4>
            </div>
            <div class="modal-body">
            	<img id="viewImage" src="">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- jQuery 2.1.4 -->
<script src="${ctx}/static/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!--Bootstrap v3.3.4-->
<script src="${ctx}/static/bootstrap/js/bootstrap.min.js"></script>
<!--bootstrap-datepicker-->
<script src="${ctx}/static/plugins/My97DatePicker/datePicker/WdatePicker.js"></script>
<!-- datatable -->
<script src="${ctx}/static/plugins/datatables/jquery.dataTables.js" type="text/javascript"></script>
<script src="${ctx}/static/plugins/datatables/dataTables.bootstrap.js" type="text/javascript"></script>
<script src="${ctx}/static/plugins/layer/layer.js"></script>
<script>
   var tb;
   $(function () {
		//列表初始化
		tb = $('#dataTables').dataTable({
				"bServerSide": true,
				"sPaginationType": "full_numbers",
				"bJQueryUI": true,
				"sDom": '<"">t<"F"ip>',
				"sAjaxSource": "${ctx}/api/member/listPage", //ajax调用接口
				"aoColumnDefs": [{sDefaultContent: '',aTargets: [ '_all' ]}],
	       		"aoColumns": [
					  	{ "sTitle" : "会员id","mData": "id" ,"class":"sClass"},
		                { "sTitle" : "头像","mData": "headImage","class":"sClass" ,"mRender":function(data,type,full) {
			                	if (full.headImage) {
				                	return '<img src="'+full.headImage + '" width="40px;" height="40px;" onclick="enlarge(\''+full.headImage +'\');"></img>';
			                	}
			                	return '';
		                	} 
					  	},
		                { "sTitle" : "联系人","mData": "memberName","class":"sClass" },
		                { "sTitle" : "联系电话","mData": "memberPhone","class":"sClass" },
		                { "sTitle" : "身份证号","mData": "idCard","class":"sClass" },
		                { "sTitle" : "注册时间","mData": "createTime","class":"sClass" },
		                { "sTitle" : "实名认证","mData": "certification","class":"sClass" ,"mRender":function(data, type, full){
			                	var text;
		                    	if(full.certification==1){
		                    		text="<font color='blue'>未认证</font>";
		                    	}else if(full.certification==2){
		                    		text="<font color='green'>已认证</font>";
		                    	}else if(full.certification==3){
		                    		text="<font color='green'>待审核</font>";
		                    	}
	                    		return text;
	        				}
		                },
		                { "sTitle" : "是否推广师","mData": "isMarketing","class":"sClass" ,"mRender":function(data, type, full){
		                		var text;
		                    	if(full.isMarketing==1){
		                    		text="<font color='blue'>是</font>";
		                    	}else if(full.isMarketing==2){
		                    		text="<font color='green'>否</font>";
		                    	}
	                    		return text;
	        				}
		                },
		                { "sTitle" : "状态","mData": "status","class":"sClass" ,"mRender":function(data, type, full){
		                		var text;
		                    	if(full.status==2){
		                    		text="<font color='blue'>正常</font>";
		                    	}else if(full.status==3){
		                    		text="<font color='green'>冻结</font>";
		                    	}
	                    		return text;
        					}
		                },
		                { "sTitle" : "会员等级","mData": "level","class":"sClass" ,"mRender":function(data, type, full){
	                		    var text;
		                    	if(full.level==1){
		                    		text="<font color='blue'>普通会员</font>";
		                    	}else if(full.level==2){
		                    		text="<font color='green'>VIP</font>";
		                    	}
	                    		return text;
    					    }
	                    },
		                {"sTitle" : "操作","mData" : "id", "mRender" : function ( data, type, full ) {
		                	  var text = '<div class="btn-group" style="text-align:left;"><button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">操作 <span class="caret"></span></button>';
								  text = text+'<ul class="dropdown-menu" role="menu">';
								  if(full.status == 3){
									  text += "<li><a href='javascript:relievefrozen("+full.id+")'>解除冻结</a></li>";
								  }else if(full.status == 2){
									  text += "<li><a href='javascript:frozen("+full.id+")'>冻结</a></li>";
								  }
								  text += '<li class="divider"></li>';
								  text += '<li><a href="${ctx}/api/memberintegral/memberintegralList?memberId='+full.id+'">积分</a></li>';
								  text = text + '</ul></div>';
								  return text;
							  } 
		                }
	            ],
		        "oLanguage" : {
		           "sProcessing" : "数据加载中······",
		           "sLengthMenu" : "显示 _MENU_ 条记录",
		           "sZeroRecords" : "没有您要搜索的内容！",
		           "sEmptyTable" : "列表中无数据存在！",
		           "sInfo" : "当前显示 _START_ 到 _END_ 条数据，共 _TOTAL_ 条数据",
		           "sInfoEmpty" : "显示 0 到 0 条记录",
		           "sInfoFiltered" : "数据列表中共  _MAX_ 条记录",
		           "oPaginate" : {
		               "sFirst" : "首页",
		               "sPrevious" : "上一页",
		               "sNext" : "下一页",
		               "sLast" : "末页"
		           }
		        },
		        "fnServerData" : function ( sSource, aoData, fnCallback, oSettings ) {
					oSettings.jqXHR = $.ajax( {
						"dataType" 	: 'json',
						"type" 		: "post",
						"async"     : 'false',
						"url" 		: sSource,
						"data" 		: {
							'pageNum': (aoData[3].value/aoData[4].value)+1,
							'pageSize' :  aoData[4].value,
							'id' : $('#member_id').val(),
							'memberName' : $('#contacts').val(),
							'memberPhone' : $('#member_phone').val(),
							'status' : $('#status').val(),
							'isMarketing' :$('#isMarketing').val(),
							'certification' :$('#certification').val(),
							'createStartTime' : $('#start_create_time').val(),
							'createEndTime' : $('#end_create_time').val(),
							'level' : $('#level').val()
						}, 
						"success"	: fnCallback
					} );
				},
		  });
   });
   //条件查询重新加载数据
   function query() {
 	    tb.fnDraw();
 	 	$('#e_memberId').val($('#member_id').val());
		$('#e_memberPhone').val($('#member_phone').val());
		$('#e_memberName').val($('#contacts').val());
		$('#e_status').val($('#status').val());
		$('#e_isMarketing').val($('#isMarketing').val());
		$('#e_certification').val($('#certification').val());
		$('#e_createStartTime').val($('#start_create_time').val());
		$('#e_createEndTime').val($('#end_create_time').val());
		$('#e_level').val($('#level').val());
   };
	//冻结会员
   function frozen(id){
	   layer.confirm('是否冻结该会员？', {
		   btn: ['是','否'] //按钮
		 }, function(){
			 var url = "${ctx}/api/member/memberFrozen";
			   $.post(url,{"id":id},function(data){
				   if(data.code == "200"){
					   layer.msg("冻结成功");
					   tb.fnDraw();
				   }else{
					   layer.msg("冻结会员失败");
				   }
		     })
	   });
   }
	//解除冻结
   function relievefrozen(id){
	   layer.confirm('是否为该会员解除冻结？', {
		   btn: ['是','否'] //按钮
		 }, function(){
			 var url = "${ctx}/api/member/relievefrozen";
			 $.post(url,{"id":id},function(data){
				   if(data.code == "200"){
					   layer.msg("解除冻结成功");
					   tb.fnDraw();
				   }else{
					   layer.msg("解除冻结会员失败");
				   }
		     })
	   });
   }
	//导出excel
   function exportExcel(){
		$('#memberExport').submit();
   }
   //图片放大
   function enlarge(url) {
	   $('#viewImage').attr("src",url);
	   $("#imageModel").modal('show');
   }
</script>
</body>
</html>